import {view, ViewGroup} from "adajs";
import LgbanalyService from "./state.js";
import {importScript} from "./../../../lib/helper";

@view({
    className: "lgbanaly",
    template: "./template.html",
    style: "./style.scss",
    dataset: {
        service: LgbanalyService
    }
})
class Lgbanaly extends ViewGroup {
    onready() {
        importScript("/static/echarts.simple.min.js").then(() => {
            this.context.request.get("/api/lgb/app/lgb/oldperson/retireCount").then(({data}) => {
                let at = data['退休'], bt = data['离休'];
                let a = this.finder("a").getElement();
                a.style.width = window.innerWidth + "px";
                window.echarts.init(a).setOption({
                    color: ['#5BB660', '#F9B545'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['已退休', '未退休']
                    },
                    series: [
                        {
                            name: '退休占比',
                            type: 'pie',
                            avoidLabelOverlap: false,
                            label: {
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '12',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            data: [
                                {value: at, name: '已退休'},
                                {value: bt, name: '未退休'}
                            ],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                }
                            }
                        }
                    ]
                });
            });
            this.context.request.get("/api/lgb/app/lgb/oldperson/sexCount").then(({data}) => {
                let at = data['男'], bt = data['女'];
                let c = this.finder("c").getElement();
                c.style.width = window.innerWidth + "px";
                window.echarts.init(c).setOption({
                    color: ['#F9B545', '#5987D6'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['男', '女']
                    },
                    series: [
                        {
                            name: '男女占比',
                            type: 'pie',
                            avoidLabelOverlap: false,
                            label: {
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '12',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            data: [
                                {value: at, name: '男'},
                                {value: bt, name: '女'}
                            ],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                }
                            }
                        }
                    ]
                });
            });
            this.context.request.get("/api/lgb/app/lgb/oldperson/treatmentCount").then(({data}) => {
                let keys = Reflect.ownKeys(data), values = keys.map(key => data[key]);
                let e = this.finder("e").getElement();
                e.style.width = window.innerWidth + "px";
                window.echarts.init(e).setOption({
                    color: ['#5BB660'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: keys
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '现享受待遇',
                            type: 'bar',
                            barWidth: '30%',
                            data: values
                        }
                    ]
                });
            });
            this.context.request.get("/api/lgb/app/lgb/oldperson/nationCount").then(({data}) => {
                let values = Reflect.ownKeys(data).map(key => {
                    return {
                        name: key,
                        value: data[key]
                    }
                });
                let f = this.finder("f").getElement();
                f.style.width = window.innerWidth + "px";
                window.echarts.init(f).setOption({
                    title: {
                        text: '各民族占比',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data: values,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                }
                            }
                        }
                    ]
                });
            });
        });
    }
}

export default Lgbanaly;